<template>
  <div class="container edition-heart">
    <span>首页</span>
    <span v-for="item in list" :key="item" style="color: #666;">
      {{ item }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const router = useRouter()

const list = ref<string[]>([])

watch(
  () => route.path,
  () => {
    if (route.path.includes('/goods')) {
      return (list.value = [' / 全部商品'])
    } else if (route.path.includes('/center')) {
      return (list.value = [' / 个人中心 / 账号管理'])
    } else if (route.path.includes('/order')) {
      return (list.value = [' / 个人中心 / 我的订单'])
    } else if (route.path.includes('/cart')) {
      return (list.value = [' / 个人中心 / 购物车'])
    } else if (route.path.includes('/message')) {
      return (list.value = [' / 个人中心 / 消息通知'])
    } else if (route.path.includes('/user/detail')) {
      return (list.value = [' / 个人中心 / 积分明细'])
    } else if (route.path.includes('/attack')) {
      return (list.value = [' / 个人中心 / 积分攻略'])
    } else if (route.path.includes('/order')) {
      return (list.value = [' / 个人中心 / address'])
    } else if (route.path.includes('/order')) {
      return (list.value = [' / 个人中心 / 地址管理'])
    } else if (route.path.includes('/safe')) {
      return (list.value = [' / 个人中心 / 账号管理'])
    } else if (route.path.includes('/details')) {
      return (list.value = [' / 全部商品 / 商品详细'])
    }
  },
  {
    immediate: true,
  },
)
</script>

<style lang="less" scoped>
.container {
  padding: 15px 0;
  span {
    &:first-child {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
